<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入菜单名称"
        :maxlength="33"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="menuLookup"
        >查找</el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="addMenu"
        >添加</el-button
      >
    </div>
    <!-- 列表区域 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      fit
      highlight-current-row
      row-key="id"
    >
      <el-table-column prop="name" label="菜单名" align="center" />
      <el-table-column prop="routerKey" label="路由" align="center" />
      <el-table-column prop="ico" label="图标" align="center" />
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editMenu(scope.row)"
            >编辑</el-button
          >
          <el-button
            slot="reference"
            type="danger"
            size="small"
            @click="menuDel(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="total > 0"
      :total="total"
      :page.sync="currentPage"
      :size.sync="pageSize"
      @pagination="currentChange"
    >
    </Pagination>
    <menuDialog
      ref="menuDialog"
      :title="menuDialog.title"
      :dialogVisible="menuDialog.dialogVisible"
      :row="menuDialog.row"
      :icoArr="menuDialog.icoArr"
      @menuCancel="menuCancel"
      @loadData="loadData"
    ></menuDialog>
  </div>
</template>

<script>
// import hsPagination from '@/components/com/hs-pagination.vue'
import menuDialog from './components/menuDialog.vue'
import { menuPage, menuDel } from '@/api/menu'
import Pagination from '@/components/Pagination'
const iocJson = require('../../components/Json/ioc.json')
export default {
  name: 'menuList',
  components: {
    menuDialog,
    Pagination
  },
  data () {
    return {
      listQuery: {
        name: ''
      },
      tableData: [],
      row: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      menuDialog: {
        dialogVisible: false,
        title: '添加菜单',
        row: {},
        icoArr: []
      }
    }
  },
  created () {
    this.loadData()
    this.ico()
  },
  methods: {
    // 查找
    menuLookup () {
      this.currentPage = 1
      this.loadData()
    },
    // 遍历ico
    ico () {
      iocJson.forEach(item => {
        const item1 = item.slice(8)
        this.menuDialog.icoArr.push(item1)
      })
    },
    // 详情
    handleClick (row) {
      this.isDetails = true
      this.row = row
    },
    loadData () {
      menuPage({
        keyword: this.listQuery.name,
        current: this.currentPage,
        size: this.pageSize
      }).then(res => {
        this.total = res.data.data.total
        this.tableData = res.data.data.records // 树形菜单列表注释这条打开下面两条↓↓↓
        // this.tableData = this.turnData(res.data.data.records, null)
        // this.total = this.tableData.length
      })
    },

    // 列表数据递归
    turnData (arr, str) {
      var resArr = []
      arr.forEach(i => {
        if (i.parentId === str) {
          var children = this.turnData(arr, i.id)
          if (children.length > 0) {
            i.children = children
          }
          resArr.push(i)
        }
      })
      return resArr
    },

    // 分页Change
    currentChange ({ page, limit }) {
      if (page) this.currentPage = page
      if (limit) this.pageSize = limit
      this.loadData()
    },
    // 删除
    menuDel (row) {
      this.$confirm('确定删除这个菜单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          menuDel(row.id)
            .then(res => {
              this.$notify.success({
                title: '成功',
                message: '删除菜单成功',
                duration: 3000
              })
              if (
                this.total > this.pageSize &&
                this.total % this.pageSize === 1
              ) {
                this.currentPage -= 1
              }
              this.loadData()
            })
            // .catch(response => {
            //   this.$notify.error({
            //     title: '失败',
            //     message: response.data.errmsg
            //   })
            // })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 添加菜单
    addMenu () {
      this.menuDialog.title = '添加菜单'
      this.menuDialog.dialogVisible = true
      this.$refs.menuDialog.menuTreea()
    },
    // 编辑菜单
    editMenu (row) {
      this.menuDialog.title = '编辑菜单'
      this.menuDialog.dialogVisible = true
      this.menuDialog.row = row
      this.$refs.menuDialog.editRender()
      this.$refs.menuDialog.menuTreea()
    },
    // 关闭弹窗
    menuCancel (value) {
      this.menuDialog.dialogVisible = value
    }
  }
}
</script>
<style lang="scss" scoped>
.add {
  margin-bottom: 20px;
}
</style>
